import React, {PureComponent} from 'react';
import moment from 'moment';
import {connect} from 'dva';
import {List, Card, Row, Col, DatePicker, Radio, Input, Tag, Badge, Button, Icon, Dropdown, Menu, Avatar} from 'antd';
import {Link} from 'dva/router';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import SendModal from '../../components/Shop/SendModal';

import styles from './BasicList.less';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const {RangePicker} = DatePicker;
const {Search} = Input;

@connect(state => ({
    shop_order: state.shop_order,
}))
export default class GoodOrderList extends PureComponent {
    state = {
        status: '',
        keyword: '',
        pagination: {size: 10, page: 1, total: 0},
        visible: false,
        created_at: [],
        item: {}
    }

    componentDidMount() {
        this.props.dispatch({
            type: 'shop_order/fetch',
        });
        this.props.dispatch({
            type: 'service_order/info',
        });
    }

    onSearch = (value) => {
        this.setState({
            keyword: value,
        });
        this.loadData(this.state.pagination.page, this.state.pagination.size, value, this.state.status);
    }
    onTimeChange = (dates) => {
        console.log(dates)
        this.state.created_at = dates
        this.loadData(this.state.pagination.page, this.state.pagination.size, this.state.keyword, this.state.status);
    }
    onPageChange = (page, pageSize) => {
        console.log(page, pageSize);
        this.loadData(page, pageSize, this.state.keyword, this.state.status);
    }

    onRightClick = (id, key) => {
        console.log(id, key);
        switch (key) {
            case 'send':
                this.props.dispatch(
                    {
                        type: 'shop_order/changeShipModal',
                        payload: true,
                    });
                this.setState({
                    item: {id: id}
                })
                break;
            case 'cancel':
                this.props.dispatch({
                    type: 'shop_order/cancel',
                    payload: {id},
                    callback: (res) => {

                        this.loadData(this.state.pagination.page, this.state.pagination.size, this.state.keyword, this.state.status);

                    },
                });
                break;
            case 'remove':
                this.props.dispatch({
                    type: 'shop_order/remove',
                    payload: {id},
                    callback: (res) => {

                        this.loadData(this.state.pagination.page, this.state.pagination.size, this.state.keyword, this.state.status);

                    },
                });
                break;
            default:
                break;
        }
    }
    loadData = (page, pageSize, keyword, status) => {
        let payload = {
            size: pageSize,
            page,
            status,
            keyword,
        }
        if (this.state.created_at.length > 0) {
            payload.created_at = [
                this.state.created_at[0].format('YYYY-MM-DD HH:mm:ss'),
                this.state.created_at[1].format('YYYY-MM-DD HH:mm:ss')
            ]
        }

        this.props.dispatch({
            type: 'shop_order/fetch',
            payload: payload,
        });
    }

    render() {
        const {shop_order: {data, info, loading}} = this.props;
        const pagination = data.pagination;
        pagination.onChange = this.onPageChange;
        this.setState({
            pagination,
        });
        const Info = ({title, value, bordered}) => (
            <div className={styles.headerInfo}>
                <span>{title}</span>
                <p>{value}</p>
                {bordered && <em/>}
            </div>
        );

        const extraContent = (
            <div className={styles.extraContent}>

                <Row>
                    <Col span={24}>
                        <RadioGroup
                            onChange={(e) => {
                                console.log(e);
                                this.setState({
                                    status: e.target.value,
                                });
                                this.props.dispatch({
                                    type: 'shop_order/fetch',
                                    payload: {
                                        size: this.state.pagination.size,
                                        page: this.state.pagination.page,
                                        status: e.target.value,
                                    },
                                });
                            }}
                            defaultValue={this.state.status}
                        >
                            <RadioButton value="">全部</RadioButton>
                            <RadioButton value={0}>待付款</RadioButton>
                            <RadioButton value={1}>待发货</RadioButton>
                            <RadioButton value={2}>待签收</RadioButton>
                            <RadioButton value={3}>已完成</RadioButton>
                            <RadioButton value={4}>已取消</RadioButton>
                        </RadioGroup>
                    </Col>
                </Row>
                <Row gutter={16} style={{marginTop: 8}}>
                    <Col span={12}>
                        <Search
                            defaultValue={this.state.keyword}
                            className={styles.extraContentSearch}
                            placeholder="请输入"
                            onSearch={(value) => {
                                this.onSearch(value);
                            }}
                        />
                    </Col>
                    <Col span={12}>
                        <RangePicker onChange={this.onTimeChange}/>
                    </Col>
                </Row>

            </div>
        );

        const ListContent = ({item}) => (
            <Row style={{flex: 1}} gutter={16}>
                <Col sm={20} md={12} lg={12} xl={8} className={styles.listItem}>
                    <span>订单号</span>
                    <p>{item.order_no}</p>
                </Col>
                <Col sm={20} md={12} lg={12} xl={8} className={styles.listItem}>

                    <span>用户</span>
                    <p>{item.user.name}</p>
                </Col>
                <Col sm={20} md={12} lg={12} xl={8} className={styles.listItem}>
                    <span>收货地址</span>
                    <p>{item.address.address}</p>
                </Col>
                <Col sm={20} md={12} lg={12} xl={8} className={styles.listItem}>
                    <span>订单金额</span>
                    <p><Tag color="orange">{Number(item.price) === 0 ? '正在议价' : `￥ ${item.price}`}</Tag></p>
                </Col>
                <Col sm={20} md={12} lg={12} xl={8} className={styles.listItem}>
                    <span>状态</span>
                    <p><Badge status={item.status_class}/>{item.status_label}</p>
                </Col>
                <Col sm={20} md={12} lg={12} xl={8} className={styles.listItem}>
                    <span>支付时间</span>
                    <p>{item.payed_at}</p>
                </Col>
                <div/>
            </Row>
        );

        const menu = item => (
            <Menu onClick={({key}) => {
                this.onRightClick(item.id, key);
            }}
            >
                <Menu.Item disabled={item.status !== 1} key="send">
                    发货
                </Menu.Item>
                <Menu.Item disabled={item.status !== 0} key="cancel">
                    取消订单
                </Menu.Item>
                <Menu.Item disabled={item.status !== 4} key="remove">
                    删除订单
                </Menu.Item>

            </Menu>
        );

        const MoreBtn = item => (
            <Dropdown overlay={menu(item)}>
                <a>
                    更多操作 <Icon type="down"/>
                </a>
            </Dropdown>
        );

        return (
            <PageHeaderLayout>
                <div className={styles.standardList}>
                    <Card bordered={false}>
                        <Row>
                            <Col sm={8} xs={24}>
                                <Info title="待发货" value="0个订单" bordered/>
                            </Col>
                            <Col sm={8} xs={24}>
                                <Info title="已完成" value="0个订单" bordered/>
                            </Col>
                            <Col sm={8} xs={24}>
                                <Info title="被作废" value="0个订单"/>
                            </Col>
                        </Row>
                    </Card>

                    <Card
                        className={styles.listCard}
                        bordered={false}
                        title="商品订单"
                        style={{marginTop: 24}}
                        bodyStyle={{padding: '0 32px 40px 32px'}}
                        extra={extraContent}
                    >
                        <List
                            size="large"
                            rowKey="id"
                            loading={loading}
                            pagination={pagination}
                            dataSource={data.list}
                            renderItem={item => (
                                <List.Item
                                    actions={[<Link to={`/shop/good_order/${item.id}`}>查看详情</Link>,
                                        MoreBtn(item),
                                    ]}
                                >
                                    <List.Item.Meta

                                        avatar={<Avatar src={item.goods[0].good.thumb} shape="square" size="large"/>}
                                        title={<a>{item.goods[0].good.name}等</a>}
                                        description={item.user.phone}
                                    />
                                    <ListContent style={{justifyContent: 'flex-start'}} item={item}/>
                                </List.Item>
                            )}
                        />
                    </Card>
                </div>
                <SendModal onSendComplete={() => {
                    this.loadData(this.state.pagination.page, this.state.pagination.size, this.state.keyword, this.state.status);
                }} item={this.state.item}/>
            </PageHeaderLayout>
        );
    }
}
